<script setup>
import {defineComponent, reactive,ref,h} from "vue"
import {getAllGroups,delGroup} from "../../utils/db"
import {getTimeBefore} from "../../utils/ops"

const {main} = defineProps(['main'])

const list = reactive([{label:"今天",children:[]},{label:"7天内",children:[]},{label:"30天内",children:[]},{label:"30天以前",children:[]}])


const clear = () => {
    for(const t of list){t.children.length = 0}
}

const refresh = async () => {
    const l = await getAllGroups();
    l.sort((a,b) => b.time - a.time).map(d => {
        const dt = getTimeBefore(d.time)
        if(dt == 0){
            list[0].children.push(d)
        }
        else if(dt <= 7 && d > 0){
            list[1].children.push(d)
        }
        else if(dt > 7 && dt <= 30){
            list[2].children.push(d)
        }
        else {
            list[3].children.push(d)
        }
    })
}

refresh();

//
const isEdit = ref(false)



const handleSelect = async(row) => {
    main.changeChat(row.id)
}

const handleEdit = async (val) => {
    // const val = e.target.value;
    // console.log('.......',val,e)
    await main.upChatTitle(val)
    clear();
    refresh();
    main.initMessage();
}

const handleDel = async (row) => {
    await delGroup(row.id);
    clear();
    refresh();
    await main.initGroup()
    await this.initMessage();
}

const Item = defineComponent(({row}) => {
    const isEdit = ref(false)
    const inputRef = ref();
    
    return () => h('div',{class:"flex items-center justify-between h-fit w-full gap-2 m-y-4 bg-#f0f0f0 rd-4 p-2",onClick:() => handleSelect(row)},[
        isEdit.value ? h('input',{ref:(e) => inputRef.value = e,value:row.title,class:"w-full box-border c-#333 b-1 b-solid p-y-2 truncate outline-none b-#409EFF shadow-none bg-transparent text-10 rd-2 p-x-4 hover-b-#fff"}) :
        h('span',{class:"w-full text-12 truncate"},row.title),
        isEdit.value ? [h('div',{class:"i-mdi:cancel-box-outline text-12 op-70 hover-op-100 cursor-pointer",title:"取消",onClick:() => isEdit.value = false}),
        h('div',{class:"i-material-symbols:check-box-outline-rounded c-#67C23A text-12 op-70 hover-op-100 cursor-pointer",title:"确定",onClick:() => handleEdit(inputRef.value.value)})] :
        h('div',{class:"i-iconamoon:edit-duotone c-#409EFF text-12 op-70 hover-op-100 cursor-pointer",title:"编辑",onClick:() => isEdit.value = true}),
        
        h('div',{class:"i-pajamas:remove c-red text-10 op-70 hover-op-100 cursor-pointer",title:"删除该分组"}),
    ])

},{ props: ['row'] })

</script>

<template>
    <div class="w-full h-full overflow-auto box-border ">
        <template v-for="d in list">
            <div v-show="d.children.length > 0" class="p-4 m-2 bg-#f5f5f5 rd-4">
                <div class="text-8">{{ d.label }}</div>
                <div class="w-full box-border p-4">
                    <template v-for="t in d.children">
                        <Item :row="t"></Item>
                        <!-- <div @click="handleSelect(t)" class="flex items-center justify-between h-fit w-full gap-4 m-y-4 bg-#f0f0f0 rd-4 p-2">
                            
                            <input v-if="isEdit" :value="t.title" @blur.self="handleEdit" class="w-full box-border c-#333 b-1 b-solid p-y-2 b-transparent truncate outline-none focus-b-#409EFF shadow-none bg-transparent text-10 rd-2 p-x-4 hover-b-#fff"  />
                            <span v-else class="w-full text-10 lh-10">{{ t.title }}</span>
                            <div @click="isEdit = !isEdit" class="i-lucide:edit text-8 c-#409EFF op-70 hover-op-100 cursor-pointer"></div>
                            <div  @click.stop="handleDel(t)" class="i-pajamas:remove c-red text-8 op-70 hover-op-100 cursor-pointer" title="删除该分组"></div>
                            
                        </div> -->
                    </template>
                </div>
            </div>
        </template>
    </div>
</template>